import React, { Component } from "react";
import styles from "./ElInput.module.scss";
import store from "../../../redux/store/index";
import { inputAction } from "../../../redux/actionCreators/search_action/index";
import axios from "../../../http/axios";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
class ElInput extends Component {
  state = {
    inpVal: "",
    show: false,
    inputListArr: [],
    submit: false,
  };

  componentDidMount() {
    // https://elm.cangdu.org/v4/restaurants?geohash=31.22967,121.4762&keyword=肯德基
  }
  handleSubmit = () => {
    this.setState({
      submit: true,
    });
    //  localStorage.setItem('status',true)
    this.props.getChildrenInfo("true");
    let keyword = this.state.inpVal;
    let geohash = [31.38098, 121.50146];

    let inputListArr = this.state.inputListArr;

    if (!keyword) {
      alert("输入不能为空，请重新输入");
    } else {
      let KeyObj = {};
      KeyObj.key = keyword;
      KeyObj.id = inputListArr.length;
      inputListArr.push(KeyObj);
    }
    console.log(inputListArr);


    
    //派发动作
    store.dispatch(inputAction(geohash, keyword));

    // this.props.history.push('/elmall')
    this.props.getSearchHistory(this.state.inputListArr);
  };
  handleChangeVal = (e) => {
    this.setState({
      inpVal: e.target.value,
    });
  };
  handleBlur = (e) => {
    this.setState({
      show: false,
    });
  };
  handleShow = () => {
    this.setState({
      show: true,
    });
  };
  handleOneDel = () => {
    this.setState({
      inpVal: "",
    });

    this.props.getClickStatus('true');
    // localStorage.setItem('status',false)
    this.props.getChildrenInfo("false");

    // this.forceUpdate();
    // if(this.state.submit==true){
    //   this.props.history.push('./elSearchHistory')
    //   // this.props.history.push(path)
    // }

    console.log(111);
    console.log(store.getState());
  };
  handleScroll = (e, val) => {
    console.log("handleMouseOver", e, val);
    this.setState({
      inpVal: val,
    });
  };

  render() {
    return (
      <div>
        <div className={styles.ElInputBox}>
          <div className={styles.inp}>
            <input
              type="text"
              name=""
              id=""
              placeholder="请输入商家或者美食的名称"
              value={this.state.inpVal}
              onChange={this.handleChangeVal}
              onBlur={this.handleBlur}
              onClick={this.handleShow}
            />
            <span className={styles.oneDel} onClick={this.handleOneDel}>
              X
            </span>
          </div>
          <div className={styles.btn}>
            <span className={styles.btnsubmit} onClick={this.handleSubmit}>
              提交
            </span>
          </div>
          {/* 历史下拉列表   +(this.state.show?"toggleListHidden":"toggleListShow")    */}

          <div
            className={
              styles.toggleList +
              " " +
              (this.state.show
                ? styles.toggleListShow
                : styles.toggleListHidden)
            }
          >
            {this.state.inputListArr &&
              this.state.inputListArr.map((v) => (
                <div
                  className={styles.toggleItem}
                  onMouseOver={(e) => this.handleScroll(e, v.key)}
                  key={v.id}
                >
                  {v.key}
                </div>
              ))}
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(
  connect(
    (state) => {
      return {
        inputListArr: state.searchReducer.inputListArr,
        submitStatus: state.searchReducer.submitStatus,
      };
    },
    () => {
      return {};
    }
  )(ElInput)
);
